<template>
  <div class="h5-singleImg-develope">
    <div class="title c-flex-x-center" v-if="pageShow">
      <h3>单图模块</h3>
    </div>
    <div class="img-container">
      <img
        src="https://tpdoc.cn/api_2020_test_public/img/saveImg/n1p4eri0iui1629894368441.png"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {},
  data() {
    return {
      pageShow: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      // 展示页面
      this.pageShow = true;
    },
  },
});
</script>
<style lang="scss" scoped>
.h5-singleImg-develope {
  .title {
    width: 10rem;
    height: 50px;
    background: #f0f0f0;
    margin: 0 auto;

    &.c-flex-x-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    h3 {
      font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
        "\5B8B\4F53", sans-serif;
      position: relative;
      min-width: 150px;
      height: 45px;
      font-size: 28px;
      text-align: center;
      line-height: 45px;
      padding: 0 30px;
      // overflow: hidden;
      color: #333;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -10px;
        background-position: 0 0;
        left: 0;
        width: 25px;
        height: 20px;
        background-size: 50px 20px;
        background-image: url(https://tpdoc.cn/api_2020_public/img/saveImg/l2d7by4kjq1645159011138.png);
      }
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -10px;
        background-position: -25px 0;
        right: 0;
        width: 25px;
        height: 20px;
        background-size: 50px 20px;
        background-image: url(https://tpdoc.cn/api_2020_public/img/saveImg/l2d7by4kjq1645159011138.png);
      }
    }
  }
  .img-container {
    img {
      width: 10rem;
      height: 10rem;
    }
  }
}
</style>
